<template>
  <div class="extra-item-active" style="width: 100%;">
    <a-spin :spinning="spinning" tip="加载中..." style="width: 100%;">
      <!-- @change="change" -->
      <a-select
        :show-search="false"
        placeholder="请选择预算项目"
        @popupScroll="popupScroll"
        optionFilterProp="children"
        v-model="projectId"
        showSearch
        :allow-clear="true"
        @select="change"
        @search="onSearch"
        style="width: 100%;"
        :field-names="{ label: 'name', value: 'projectId' }"
        :option="projectList"
        @blur="onBlur">
        <a-select-option v-for="(item, index) in projectList" :key="index" :value="item.projectId">
          {{ item.name }}
        </a-select-option>
      </a-select>
    </a-spin>
  </div>
</template>
<script>

import { getProjects } from '@/api/budget'
export default {
    components: {},
    data () {
        return {
            // 项目预算数据
            projectList: [],
            pageNo: 1,
            max: false,
            spinning: false,
            pageSize: 10,
            searchWorld: '',
            total: 0,
            projectId: undefined
        }
    },
    mounted () {
        this.loadDatas()
    },
    methods: {
        init (par) {
            if (this.max) return
            this.loadDatas()
            if (par) {
                this.projectId = par.projectId
            }
        },
        onBlur () {
            this.searchWorld = ''
            this.dataList = []
            this.max = false
            this.loadDatas()
        },
        // 加载预算项目数据
        loadDatas () {
            this.pageNo = 1
            var param = {
                current: this.pageNo,
                pageSize: this.pageSize,
                name: this.searchWorld,
                inOrOut: '',
                description: ''
            }
            getProjects(param).then((res) => {
                if (res.code == 200) {
                    this.projectList = res.data.datas
                    this.total = res.data.total
                }
            })
        },
        // 滚动条滚动监听方法
        async popupScroll (e) {
            const that = this
            const { target } = e
            const scrollHeight = target.scrollHeight - target.scrollTop // 滑动总高度
            const clientHeight = target.clientHeight // 滑动最低高度
            // 当下拉框滚动条到达底部的时候
            if (!this.max && scrollHeight < clientHeight + 2) {
                this.spinning = true
                // 数据起始条数
                this.pageNo++
                var newList = []
                var param = {
                    current: this.pageNo,
                    pageSize: this.pageSize,
                    name: this.searchWorld,
                    inOrOut: '',
                    description: ''
                }
                await getProjects(param).then((res) => {
                    if (res.code == 200) {
                        newList = res.data.datas
                        that.total = res.data.total
                        if (newList.length == 0) {
                            that.max = true
                        }
                    }
                })
                if (that.total != this.projectList.length) {
                    // 数据追加
                    this.projectList = this.projectList.concat(newList)
                }
                this.spinning = false
            }
        },
        // 下拉框搜索方法
        onSearch (val) {
            if (val.length != 0) {
                this.searchWorld = val
                this.projectList = []
                this.max = false
                this.loadDatas()
            } else {
                this.searchWorld = ''
                this.projectId = undefined
                this.projectList = []
                this.max = false
                this.loadDatas()
            }
        },
        change (val) {
            const item = this.projectList.find(it => val == it.projectId)
            if (this.triggerChange) {
                this.$emit('change', item)
            } else {
                this.$emit('input', item)
            }
        }
    }
}
</script>
<style scoped lang="less" >
.extra-item-active {
    display: inline-block;
    margin-right: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
